<template>
	<view class="successful">
		<view class="success-content" v-if="type == 1">
			<view class="main">
				<view class="title">
					<view class="line"></view>
					<view class="">本次用时</view>
					<view class="line"></view>
				</view>

				<view class="timer">
					{{ timer }}
					<span style="color: black; font-size: 28rpx">秒</span>
				</view>

				<view class="best">最好的成绩:{{ bestgrades / 1000 }}s</view>
			</view>
			<view class="faile-pai" @click="getTop">点击查看排行</view>
			<view class="footer">
				<view class="btn Replay" @click="again">重玩</view>
				<view class="btn next" @click="next" v-if="isShowNext && isgame == 1">下一关</view>
			</view>
		</view>
		<view class="faile-content" v-else>
			<view class="main">
				<view class="title">很遗憾！挑战失败</view>
				<view class="desc">挑战未过关，再来一次！积累词库，提升实力,下个关卡等你轻松突破！</view>
			</view>
			<view class="faile-pai" @click="getTop" style="color: #645e5e;">点击查看排行</view>
			<view class="footer">
				<view class="btn back" @click="goHome">返回首页</view>
				<view class="btn next" @click="again">再来一次</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getLevel, getWords } from '@/services/level.js';
export default {
	data() {
		return {
			globalData: null,
			contentHeight: 0,
			isShow: false,
			type: 1, //1为成功，0 为失败
			timer: 0,
			levelData: [],
			nextGame: {},
			isShowNext: true,
			num: 0,
			bestgrades: 0,
			isgame: 1
		};
	},
	created() {
		// 在组件创建时获取 globalData
	},
	onLoad(options) {
		this.type = options.type;
		this.isgame = options.isgame; //  2 表示从活动进来了
		if (options.timer) {
			this.timer = options.timer / 1000;
		}

		this.stage = options.stage;
		this.libId = options.libId;
		this.num = options.stageid;
		this.getlevelData(options.libId);
	},

	methods: {
		async getlevelData(id) {
			const res = await getLevel(id);
			if (res.code == 200) {
				this.levelData = res.rows;
				console.log(res.rows, 'rows', this.stage, 'this.stage');
				let index = res.rows.findIndex((item) => {
					return item.rid == this.stage;
				});
				this.bestgrades = res.rows[index].history.cost;
				console.log(index, 'index');
				if (index == res.rows.length - 1) {
					//说明当前已经是最后一关了
					this.isShowNext = false;
				} else {
					this.nextGame = res.rows[index + 1];
				}
			}
		},
		goback() {
			uni.navigateBack();
		},
		getTop() {
			let item = { stage: this.num, libId: this.libId };
			console.log(item, 'item');
			uni.navigateTo({
				url: '/pages/ingame/leaderBoard?item=' + JSON.stringify(item)
			});
		},
		goHome() {
			wx.switchTab({
				url: '/pages/home/index'
			});
		},
		again() {
			this.toPage('pages/switchbooks/index');
		},
		next() {
			uni.redirectTo({
				url: '/pages/ingame/index?item=' + JSON.stringify(this.nextGame)
			});
		},
		toPage(url) {
			let pages = getCurrentPages();
			var num = pages.length;
			//当前页面栈总数
			var backnum;
			//需要返回的页数
			for (var i = 0; i < num; i++) {
				console.log(pages[i].route);
				//循环找到指定页面路由所在的页数
				if (pages[i].route == url) {
					//'pages/mypage/mypage'替换成A页面的路由地址
					backnum = num - i - 1;
					//计算返回的层数，总数-指定页面页数-1
				}
			}
			uni.navigateBack({
				delta: backnum
				//返回的页面数，如果 delta 大于现有页面数，则返回到首页。
			});
		}
	}
};
</script>

<style scoped lang="scss">
.successful {
	height: 100vh;
	background: #1f2233;
	display: flex;
	align-items: center;
	justify-content: center;
	.success-content {
		width: 670rpx;
		height: 988rpx;
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		.line {
			width: 80rpx;
			background-color: #e6e6e6;
			height: 2rpx;
		}
		.main {
			width: 530rpx;
			position: absolute;
			top: 390rpx;
			left: 80rpx;
			.title {
				width: 360rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				font-size: 24rpx;
				color: #b3b3b3;

				margin: 10rpx auto;
			}
			.timer {
				text-align: center !important;
				height: 168rpx;
				font-weight: 600;
				font-size: 120rpx;
				color: #0fb09b;
				line-height: 168rpx;
				text-align: right;
				margin: 0 auto;
				margin-top: 20rpx;
			}
			.best {
				width: 240rpx;
				height: 58rpx;
				line-height: 58rpx;
				text-align: center;
				background: #ffffff;
				border-radius: 30rpx;
				margin: 20rpx auto;
				font-size: 24rpx;
				color: #999999;
			}
		}
		.footer {
			width: 500rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			position: absolute;
			bottom: 40rpx;
		}
	}
	.faile-content {
		width: 594rpx;
		height: 670rpx;
		background-repeat: no-repeat;
		background-image: url();
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		position: relative;
		.main {
			position: absolute;
			top: 200rpx;
			padding-left: 40rpx;
		}
		.desc {
			width: 500rpx;
			margin-top: 80rpx;
			font-size: 30rpx;
			color: #3d5566;
		}
		.title {
			font-size: 40rpx;
		}
		.footer {
			width: 594rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			position: absolute;
			bottom: 40rpx;
		}
	}

	.faile-pai {
		position: absolute;
		bottom: 160rpx;
		color: lightgray;
	}

	.btn {
		padding: 24rpx 60rpx;
		color: #ffffff;
		border-radius: 44rpx;
	}
	.Replay {
		background: linear-gradient(270deg, #05d19a 0%, #05c7ac 100%);
	}

	.next {
		background: #fe8926;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(254, 137, 38, 0.4);
		margin-left: 20rpx;
	}
	.back {
		background: #bbc6d1;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(132, 148, 160, 0.4);
		color: black;
	}
}
</style>
